﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="scrollbar.aspx.cs" Inherits="scrollbar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
            .decrease.thumb
            {
                background-image: url('/images/decrease.png');
            }
            
            .decrease.thumb:hover
            {
                background-image: url('/images/decrease2.png');
            }
            
            .increase.thumb
            {
                background-image: url('/images/increase.png');
            }
            
            .increase.thumb:hover
            {
                background-image: url('/images/increase2.png');
            }
             
            .track.thumb
            {
                border: 1px solid #9a9a9a;
                background-image: url('/images/track.png');
                border-radius: 1px 1px 1px 1px;
                -webkit-border-radius: 1px 1px 1px 1px;
                -moz-border-radius: 1px 1px 1px 1px;
            }
            
            .track.thumb:hover
            {
                background-image: url('/images/track2.png');
            }
            
            .horizontal .decrease.thumb
            {
                background-image: url('/images/hdecrease.png');
            }
            
            .horizontal .decrease.thumb:hover
            {
                background-image: url('/images/hdecrease2.png');
            }
            
            .horizontal .increase.thumb
            {
                background-image: url('/images/hincrease.png');
            }
            
            .horizontal .increase.thumb:hover
            {
                background-image: url('/images/hincrease2.png');
            }
             
            .horizontal .track.thumb
            {
                border: 1px solid #9a9a9a;
                background-image: url('/images/htrack.png');
                border-radius: 1px 1px 1px 1px;
                -webkit-border-radius: 1px 1px 1px 1px;
                -moz-border-radius: 1px 1px 1px 1px;
            }
            
            .horizontal .track.thumb:hover
            {
                background-image: url('/images/htrack2.png');
            }
    </style>
    <script type="text/javascript" src="/scripts/NinJa.js"></script>
    <script type="text/javascript" src="/scripts/NinJaVisuals.js"></script>
    <script type="text/javascript" src="/scripts/NinJaControls.js"></script>
    <script type="text/javascript">
        Page.OnLoad.Add(function () {
            $ScrollBar("Scb1").OnScrollChange.Add(function (e) {
                $Span("Spn1").Text(e.Sender.Value());
            });

            $ScrollBar("Scb2").OnScrollChange.Add(function (e) {
                $Span("Spn2").Text(e.Sender.Value());
            });

            $TextBox("Txt1").OnTextChanged.Add(function (e) {
                $ScrollBar("Scb1").Height(e.Sender.Text().ToInt());
            });

            $TextBox("Txt2").OnTextChanged.Add(function (e) {
                $ScrollBar("Scb2").Width(e.Sender.Text().ToInt());
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="scrollbar" id="Scb1" maxvalue="200"></div>
    <span id="Spn1"></span>
    <input type="text" id="Txt1" />

    <div class="scrollbar horizontal" id="Scb2" direction="horizontal" maxvalue="200"></div>
    <span id="Spn2"></span>
    <input type="text" id="Txt2" />
    </form>
</body>
</html>
